<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <title>
        js调用java
    </title>
</head>

<body>
<p>
    <xmp id="show">
    </xmp>
</p>
<p>
    <xmp id="init">
    </xmp>
</p>
<p>
    <input type="text" id="text1" value="用户名(username)" />
</p>
<p>
    <input type="text" id="text2" value="password" />
</p>
<p>
    <input type="button" id="enter" value="发消息给Native" onclick="testClick();"
    />
</p>
<p>
    <input type="button" id="enter1" value="调用Native方法" onclick="testClick1();"
    />
</p>
<p>
    <input type="button" id="enter2" value="显示html" onclick="testDiv();" />
</p>
<p>
    <input type="file" value="打开文件" />
</p>
</body>
<script>
        function testDiv() {
            document.getElementById("show").innerHTML = document.getElementsByTagName("html")[0].innerHTML;
        }

        function testClick() {
            var data = "Hello, I'm web !"
            window.WebViewJavascriptBridge.send(
                data
                , function(responseData) {
                    document.getElementById("show").innerHTML = "native : " + responseData
                }
            );

        }

        function testClick1() {
            var str1 = document.getElementById("text1").value;
            var str2 = document.getElementById("text2").value;

            var request = new Object;
            request.platform = "web";
            request.version = "1.0";
            var user = new Object;
            user.userName = str1
            user.password = str2;
            user.caller = "web";
            request.params = user
     
            var requestData =JSON.stringify(request);
            //call native method
            window.WebViewJavascriptBridge.callHandler(
                'functionInNative'
                , requestData
                , function(responseData) {
                    //WebViewJavascriptBridge.js #88 已经转成object
                    document.getElementById("show").innerHTML = "native reponse(functionInNative) : " + JSON.stringify(responseData);
                }
            );
        }

        function bridgeLog(logContent) {
            document.getElementById("show").innerHTML = logContent;
        }

        function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }


        connectWebViewJavascriptBridge(function(bridge) {

            // 处理 native 发送的 message 
            bridge.init(function(message, responseCallback) {

                document.getElementById("show").innerHTML = "native : " + message

                if (responseCallback) {
                    responseCallback("Hi, I'm web!");
                }
            });

            // 注册 js 方法 
            bridge.registerHandler("functionInJs", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("native request(functionInJs): " + data);
                if (responseCallback) {
                    var result = new Object;
                    result.data = "";
                    result.code = 200;
                    result.message = "success";
                    var responseData=JSON.stringify(result);
                    responseCallback(responseData);
                }
            });
        })
    </script>

</html>
